import React, { PureComponent } from "react";

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      fruit:'apple',
      color: ['red']
    }
  }

  handleClick(e) {
    e.preventDefault()
    console.log('选中的水果:', this.state.fruit);
  }

  // 单选
  handleSelect(e) {
    console.log(e.target.value);
    this.setState({ fruit: e.target.value })
  }

  // 多选
  // 多选获取的是selectedOptions
  handleMultiSelect(e) {
    console.log(Array.from(e.target.selectedOptions).map(item => item.value));
    const color = Array.from(e.target.selectedOptions).map(item => item.value)
    this.setState({color})
  }

  render() {
    const { fruit, color } = this.state
    return (
      <div>
        <form onSubmit={(e) => this.handleClick(e)}>
          <div>
            水果：
            {/* select组件 */}
            <select value={fruit} onChange={e => this.handleSelect(e)}>
              <option value="apple">苹果</option>
              <option value="watermelon">西瓜</option>
              <option value="grape">葡萄</option>
            </select>
          </div>
          <div>
            颜色：
            {/* select组件 */}
            <select multiple value={color} onChange={e => this.handleMultiSelect(e)}>
              <option value="red">红色</option>
              <option value="blue">蓝色</option>
              <option value="green">绿色</option>
            </select>
          </div>
          <button type="submit">注册</button>
        </form>
      </div>
    )
  }
}

export default App;
